
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class CustomScrollViewEx extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return CustomScrollViewEx2();
    // return Scaffold(
    //   appBar: AppBar(title: Text('CustomScrollView 是咧'),),
    //   body: CustomScrollViewEx1(),
    // );
  }
}

//一个使用slivers创建自定义的滚动效果的ScrollView
class CustomScrollViewEx1 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        const SliverAppBar(
          pinned: true,
          expandedHeight: 250.0,
          flexibleSpace: FlexibleSpaceBar(
            title: Text('Demo'),
          ),
        ),
        SliverGrid(delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index){
              return Container(
                alignment: Alignment.center,
                color: Colors.teal[100*(index %9)],
                child: Text('Grid Item $index'),
              );
            },childCount: 20
        ), gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(maxCrossAxisExtent: 200.0,
        mainAxisSpacing: 10.0,
        crossAxisSpacing: 10.0,
        childAspectRatio: 4.0),),
      ],
    );
  }
}

class CustomScrollViewEx2 extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _CustomScrollViewEx2();
  }
}

class _CustomScrollViewEx2 extends State<CustomScrollViewEx2>
{
  List<int> top = <int>[];
  List<int> bottom = <int>[0];
  @override
  Widget build(BuildContext context) {
    const Key centerKey = ValueKey<String>('bottom-sliver-list');
    return Scaffold(
      appBar: AppBar(
        title: const Text('Press on the plus to add items above and below'),
        leading: IconButton(onPressed: (){
          setState(() {
            top.add(-top.length -1);
            bottom.add(bottom.length);
          });
        }, icon: const Icon(Icons.add)),
      ),
      body: CustomScrollView(
        center: centerKey,
        slivers: [
          SliverList(delegate: SliverChildBuilderDelegate((BuildContext context, int index){
            return Container(
              alignment: Alignment.center,
              color: Colors.blue[200+top[index] % 4 * 100],
              height: 100 + top[index] % 4 * 20.0,
              child: Text('Item: ${top[index]}'),
            );
          },
          childCount: top.length)),
          SliverList(delegate: SliverChildBuilderDelegate((BuildContext context, int index){
            return Container(alignment: Alignment.center,
            color: Colors.red[200 + bottom[index] % 4 * 100],
            height: 100 + bottom[index] % 4 * 20.0,
            child: Text('Item : ${bottom[index]}'),);

          },
          childCount: bottom.length),
          key: centerKey,),
        ],
      ),
    );
  }
}